<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .li1 {
            color: red;
        }

        .li2 {
            color: blue;
        }
    </style>
</head>
<body>
    <ul class="ul1">
        <li class="li2">1</li>
        <li class="li2">2</li>
        <li class="li2">3</li>
    </ul>
</body>
<script>
    let lis = document.querySelectorAll(".ul1>li");


    // 事件绑定函数，函数的第一个形式参数是事件对象，即window.event对象，用于描述当前所发生的事件
    // 我们可以通过事件对象，来获取当前时哪一个DOM对象触发的事件
    function fun1(e) {
        // console.log("e.currentTarget = ",e.currentTarget);
        let li = e.currentTarget;
        for (let v of lis) { 
            // 如果是当前点击的li，那么添加.li1，移除li2
            if (li == v) {
                v.classList.add("li1");
                v.classList.remove("li2");
            // 如果不是被点击的li，那么添加.li2，移除.li1
            } else {
                v.classList.add("li2");
                v.classList.remove("li1");
            }
            // v.classList.toggle：有则删除，无则添加（class值切换）
        }
    }


     // 遍历，添加事件处理函数
     for (let v of lis) {
        v.addEventListener("click",fun1);
    }
</script>
</html>